<template>
  <div id="second">
    <x-header :left-options="{showBack: false}" @on-click-back="comehome" style="background-color:#4786ff;">盘点单 任务中</x-header>

    <div class="card">
      <div class="item">
        <span class="key">工号:</span>
        <span class="value">{{sgh}}</span>
      </div>
      <div class="item">
        <router-link :to="{ path:'/scan/id', query: { gh:  sgh} }" class="btn">
          <span class="key">已盘点卡片数:</span>
          <span class="value">{{ssize}}</span>
        </router-link>
      </div>
      <div class="itembtn"></div>
    </div>
    <div class="card"  v-show="showDeptdata">
      <div class="item">
        <span class="key">部门:</span>
        <span class="value">{{bmmc}}</span>
      </div>
       <div class="itembtn" @click.preventDefault="showdialog">
        <x-button mini type="primary">切换</x-button>
      </div>
    </div>
    <div class="card" v-show="showDeptdata">
       <div class="item">
        <span class="key">单据号:</span>
        <span class="value">{{djh}}</span>
      </div>

    </div>
    <x-table class='chart1' :cell-bordered="false" style="background-color:#fff;" v-show="showtable">
      <thead>
      </thead>
      <tbody>
      <tr>
        <td class="td-left">库房名称</td>
        <td class="td-right">{{querydata.kfmc}}</td>
      </tr>
      <tr>
        <td class="td-left">卡片编号</td>
        <td class="td-right">{{querydata.kpbh}}</td>
      </tr>
      <tr>
        <td class="td-left">资产名称</td>
        <td class="td-right">{{querydata.yqmc}}</td>
      </tr>
      <tr>
        <td class="td-left">型号</td>
        <td class="td-right">{{querydata.xh}}</td>
      </tr>
      <tr>
        <td class="td-left">购置日期</td>
        <td class="td-right">{{querydata.gzrq}}</td>
      </tr>
      <tr>
        <td class="td-left">使用部门</td>
        <td class="td-right">{{querydata.lydwmc}}</td>
      </tr>
      <tr style="border-bottom: 1px solid #ddd">
        <td class="td-left">安置地点</td>
        <td class="td-right">{{querydata.azAzdd}}</td>
      </tr>
      <tr>
        <td colspan="2">
          <flexbox style="padding-top: 5px; bottom: 70px ">
            <flexbox-item>
              <x-button class="icon-btn" type="default" :disabled="showbutton" style="background: dodgerblue"
                        @click.native="TransferDepartment"><span class="ic_elect"></span><span class="text">转科</span>
              </x-button>
            </flexbox-item>
            <flexbox-item style="position: relative; font-size: 12px">

              <!--<div :disabled="showbutton" style="background: dodgerblue" @click.native="dialog">安置点</div>-->
              <x-button class="icon-btn" type="default" :disabled="showbutton" style="background: #f7f7f7;"
                        @click.native="dialog">
                <span class="icon-site"></span><span class="text">安置点</span>
              </x-button>
            </flexbox-item>

         <!--   <flexbox-item>
              <x-button class="icon-btn" type="default" :disabled="showbutton" style="background: dodgerblue"
                        @click.native="ensure"><span class="ic_elect"></span><span class="text">确认</span>
              </x-button>
            </flexbox-item>-->
           <!-- <flexbox-item>
              <x-button class="icon-btn" type="default" :disabled="showbutton" style="background: dodgerblue"
                        @click.native="Revocationazd"><span class="ic_chehui"></span><span class="text">撤销</span>
              </x-button>
            </flexbox-item>-->
          </flexbox>
        </td>


      </tr>
      <tr></tr>
      <tr></tr>
      <tr></tr>
      </tbody>
    </x-table>


    <tabbar style="position:fixed;bottom:0;width:100%">
      <tabbar-item>

        <span slot="label"> <x-button type="primary" class="sm-btn" @click.native="ScanCode">扫码盘点</x-button></span>
      </tabbar-item>


    </tabbar>

    <div v-transfer-dom>
      <x-dialog v-model="show" class="dialog-demo"
                :dialog-style="{'max-width': '100%', width: '80%','overflow':'inherit'}">
        <div class="dialog-header"></div>
        <div class="img-box" style="height: 100%;max_width:100%;width: 100%">
          <x-table style="width: 80%;margin-left: auto;margin-right: auto">
            <tbody>
            <tr>
              <td style="position: relative;height: 64px;line-height: 64px">
                <span class="required">*</span>
                <group>
                  <selector ref="defaultValueRef" title="" :options="yqlist" v-model="yqdata" @on-change="changeyq"
                            v-verify="yqdata" placeholder="请选择一个院区位置"></selector>
                  <label class="tip" v-verified="verifyError.yqdata"></label>
                </group>
              </td>
            </tr>
            <tr>
              <td style="position: relative;height: 64px;line-height: 64px">
                <span class="required">*</span>
                <group>
                  <selector ref="defaultValueRef" title="" :options="lqlist" v-model="lqdata" v-verify="lqdata"
                            placeholder="请选择一个所在楼的位置"></selector>
                  <label class="tip" v-verified="verifyError.lqdata"></label>
                </group>
              </td>
            </tr>
            <tr>
              <td style="position: relative;height: 64px;line-height: 64px">
                <span class="required">*</span>
                <group>
                  <!--  <selector ref="defaultValueRef" title="省份" :options="list" v-model="defaultValue"></selector>-->
                  <x-input title="" v-model.trim="detailwz" placeholder="请输入详细位置" v-verify="detailwz"></x-input>
                  <label class="tip" v-verified="verifyError.detailwz"></label>
                </group>
              </td>
            </tr>
            <tr>
              <td style="position: relative;height: 64px;line-height: 64px">
                <flexbox-item style="margin-top: 10px">
                  <x-button type="primary" class="btn5" style="width: 80%" @click.native="confirmdialog">确认</x-button>
                </flexbox-item>
              </td>
            </tr>
            </tbody>
          </x-table>
        </div>
        <p class="close">
          <span class="weui-icon-clear" @click="show=false"></span>
        </p>
      </x-dialog>

    </div>


    <div v-transfer-dom>
      <confirm v-model="showazd" :title="confirmtext" confirm-text="好" theme="ios" cancel-text="再看看"
               @on-confirm="onConfirm">
        <p style="text-align:center;">是否撤回安置地点的修改</p>
      </confirm>
    </div>


    <div v-transfer-dom>
      <confirm v-model="showkp" :title="confirmtext" confirm-text="是" theme="ios" cancel-text="否"
               @on-confirm="onConfirmKp">
        <p style="text-align:center;">当前界面有未确认的卡片，是否继续当前操作</p>
      </confirm>
    </div>

    <div v-transfer-dom>
      <confirm v-model="showzk" :title="confirmtext" confirm-text="是" theme="ios" cancel-text="否"
               @on-confirm="onConfirmzk">
        <p style="text-align:center;">当前盘点部门与卡片使用部门不一致,是否转科?</p>
      </confirm>
    </div>



    <div v-transfer-dom>
      <loading :show="modelshow==1" :text="加载中"></loading>
    </div>

    <div v-transfer-dom>
      <x-dialog v-model="smqr">
        <div class="search">
          <input type="text" v-model="keyword">
          <x-button mini type="primary" @click.native="search">搜索</x-button>
        </div>
        <div class="table">
          <checklist ref="demoObject" :options="objectList" v-model="objectListValue" :max="1"></checklist>
        </div>
        <div class="operate-btn">
          <button class="cancle" @click="smqr=false">取消</button>
          <button class="confirm" @click="queding">确定</button>
        </div>
      </x-dialog>
    </div>
    <scan ref="scan" @scanResult="scanResult" > </scan>
  </div>
</template>

<script>


  import {XTable, LoadMore, XHeader} from 'vux'
  import {XButton, Box, GroupTitle, Group, Flexbox, FlexboxItem, Divider} from 'vux'
  import {AjaxPlugin} from 'vux'
  import {XDialog, TransferDomDirective as TransferDom} from 'vux'
  import {CellBox, Checklist, Selector} from 'vux'
  import {Confirm, AlertModule, Alert} from 'vux'
  import {XInput, Cell} from 'vux'
  import {Tabbar, TabbarItem} from 'vux'
  import { Loading } from 'vux'
  import dingtalk from 'dingtalk-javascript-sdk';
  import Qs from 'qs'
  import axios from 'axios'
  import  scan  from "./components/scan"
  import   config  from "./common/js/config.js"
  export default {
    directives: {
      TransferDom
    },
    components: {
      XButton,
      XTable,
      Flexbox,
      FlexboxItem,
      Group,
      XHeader,
      CellBox,
      Selector,
      Confirm,
      Alert,
      XInput,
      Cell,
      Tabbar,
      TabbarItem,
      Loading,
      dingtalk,
      XDialog,
      Checklist,
      Qs,
      axios,
      scan,
      config
    },
    data() {
      return {
        keyword:"",
        objectListValue: [],
        objectList: [],
        ssize: '',
        smqr:false,
        sgh: '',
        querydata: '',
        show: false,
        yqdata: '',
        yqlist: [],
        lqdata: '',
        lqlist: [],
        showazd: false,
        AlternateKpbh: '',
        confirmtext: '提示',
        detailwz: '',
        showkp: false,
        byazdd: '',
        azYq: '',
        azWzdz: '',
        showtable: true,
        kpbh: '',
        showbutton: false,
        ConfirmedSize: '',
        secondpageurl: config.baseurl,
        modelshow:'0',
        showDeptdata:false,
        bmmc:'',
        djh:'',
        showzk:false,
        checkedkpbh:''


      }

    },
    methods: {

      scanLoad(){//调用组件的扫码方法
        this.$refs.scan.scan();
      },
      scanResult(ops){//返回扫码的结果
        this.ExecuteScan(ops.result);
      },
      onHide() {

      },
      onShow() {

      },

      onConfirmzk(){

        this.TransferDepartment()
      },

      TransferDepartment(){
        var This=this
        axios.get(this.secondpageurl + '/wd-wmt/Inventory/TransferDepartment?kpxh='+this.querydata.kpxh+ "&serialno=" + this.querydata.serialNo)
          .then(function (data) {
            AlertModule.show({
              title: '',
              content: data.data.message,
              onShow() {
              },
              onHide() {
                This.freshSecondPage(This.AlternateKpbh)
              }
            })
            setTimeout(() => {
              AlertModule.hide()
            }, 5000)
          })
          .catch(function (error) {
            console.log(error);
          });
      },


      showdialog(){
        this.smqr=true;
        var This=this;
        axios.get(this.secondpageurl + '/wd-wmt/Inventory/QueryDept?name='+this.keyword)
          .then(function (response) {
            This.objectList=response.data;
            console.log( This.objectList)
          })
          .catch(function (error) {
            console.log(error);
          });
      },


      queding(){
        if( this.objectListValue.length!=0){
          var index=this.objectListValue[0];
          for (var i = 0; i < this.objectList.length; i++) {
            var obj = this.objectList[i];
            if(index==obj.key){

              var  Dept={
                bmxh:obj.key,
                bmdm:obj.id,
                bmmc:obj.value,
              }
              this.submitdialog(Dept)
            }

          }
          this.smqr=false;
        }else {
          this.smqr=false;

        }

      },

      submitdialog(data){

        var This=this
        var dept= Qs.stringify(  {Dept:JSON.stringify(data)})
        axios.post( this.secondpageurl+'/wd-wmt/Inventory/SaveBill',
          dept,
          {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
        ).then((data) => {
          This.showDeptdata=data.data.returncode
          This.bmmc=data.data.inventoryDept.bmmc
          This.djh=data.data.djh
        }).catch(e => {
          // 打印一下错误
          console.log(e)
        })
      },

      search(){
        var This=this;
        axios.get(this.secondpageurl + '/wd-wmt/Inventory/QueryDept?name='+this.keyword)
          .then(function (response) {
            This.objectList=response.data;
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      ensure(){
        this.showbutton = true
        AjaxPlugin.$http.get(this.secondpageurl + '/wd-wmt/Inventory/InsertConfirmCard?serialno='+ this.querydata.serialNo )
          .then((data) => {
            if (data.data.i == 1) {
              this.ssize = data.data.size
              this.sgh = data.data.gh
              this.querydata = ''
              this.byazdd = ''
              this.showtable = false
              this.showbutton = true
            }
          }).catch(e => {
          // 打印一下错误
          console.log(e)
        })
      },


      comehome(){
        this.$router.replace({path:'/home'});

      },
      dialog() {
        this.yqdata = ''
        this.lqdata = ''
        this.detailwz = ''
        this.show = true
        this.selectyq()

      },
      confirmdata() {
        this.showbutton = true
        var ConfirmCard = {}
        ConfirmCard["gh"] = this.sgh;
        ConfirmCard["kpbh"] = this.AlternateKpbh
        ConfirmCard["lydwmc"] = this.querydata.bmmc;
        ConfirmCard["yqbm"] = this.querydata.zcdm;
        ConfirmCard["yqmc"] = this.querydata.zcmc;
        ConfirmCard["pm"] = '';
        ConfirmCard["xh"] = this.querydata.ggxh;
        ConfirmCard["gzrq"] = this.querydata.grrq
        ConfirmCard["bxrq"] = this.querydata.bxsj
        ConfirmCard["syrxm"] = this.querydata.syrxm

        if (this.azYq!="" && this.azWzdz!="" && this.detailwz!="" ){
          ConfirmCard["azYq"] = this.azYq
          ConfirmCard["azWzdz"] = this.azWzdz
          ConfirmCard["azDddress"] = this.detailwz
          ConfirmCard["azAzdd"] = this.azYq + this.azWzdz + this.detailwz
          ConfirmCard["oldazAzdd"]=this.azYq + this.azWzdz + this.detailwz
          ConfirmCard["oldazYq"] = this.azYq
          ConfirmCard["oldazWzdz"] = this.azWzdz
          ConfirmCard["oldazDddress"] = this.detailwz
        }else {
          ConfirmCard["azYq"] = ""
          ConfirmCard["azWzdz"] = ""
          ConfirmCard["azDddress"] = ""
          ConfirmCard["azAzdd"] = this.querydata.azdd
          ConfirmCard["oldazAzdd"]=this.querydata.azdd
          ConfirmCard["oldazYq"] = this.azYq
          ConfirmCard["oldazWzdz"] = this.azWzdz
          ConfirmCard["oldazDddress"] = this.detailwz
          ConfirmCard["oldazYq"] = ""
          ConfirmCard["oldazWzdz"] = ""
          ConfirmCard["oldazDddress"] = ""

        }



        ConfirmCard["kpxh"] = this.querydata.serialNo;
        ConfirmCard["kfmc"] = this.querydata.kfmc;
        ConfirmCard["zkbmxh"] = this.querydata.bmxh
        ConfirmCard["zkbmdm"] = this.querydata.bmdm;
        ConfirmCard["zkbmmc"] = this.querydata.bmmc;

        console.log(ConfirmCard)

        AjaxPlugin.$http.post(this.secondpageurl + '/wd-wmt/Inventory/InsertConfirmCard', ConfirmCard)
          .then((data) => {
            if (data.data.i == 1) {
              this.ssize = data.data.size
              this.sgh = data.data.gh
              this.querydata = ''
              this.byazdd = ''
              this.showtable = false
              this.showbutton = true
            }
          }).catch(e => {
          // 打印一下错误
          console.log(e)
        })


      },

      changeyq() {
        if (this.yqdata != '') {
          this.selectlq()

        }


      },
      selectyq() {
        AjaxPlugin.$http.post(this.secondpageurl + '/wd-wmt/Inventory/QueryBranch_Type')
          .then((data) => {
            console.log(data)
            this.yqlist = data.data.listyq
            this.yqdata= data.data.listyq[0].key
          }).catch(e => {
          // 打印一下错误
          console.log(e)
        })
      },
      selectlq() {
        var id = this.yqdata;
        var kp=this.querydata.kpbh
        AjaxPlugin.$http.post(this.secondpageurl + '/wd-wmt/Inventory/QueryBranch?id=' + id+ '&kpbh=' + kp)
          .then((data) => {
            this.lqlist = data.data.listlq
            for (var i = 0; i <  data.data.listlq.length; i++) {
              var obj =  data.data.listlq[i];
              if(obj.value==data.data.azdd){
               this.lqdata=obj.key
              }

            }
          }).catch(e => {
          // 打印一下错误
          console.log(e)
        })
      },

      freshSecondPage(kpbh) {
        AjaxPlugin.$http.post(this.secondpageurl + '/wd-wmt/Inventory/QuerySecondPage?gh='+this.sgh+'&kpbh=' + kpbh)
          .then((data) => {

            this.sgh = data.data.gh;
            this.ssize = data.data.size;
            if( data.data.cardResult.detail!=null){
              this.querydata = data.data.cardResult.detail
            }

            if(data.data.checkedDept.inventoryDept!=null){
              this.bmmc=data.data.checkedDept.inventoryDept.bmmc
            }
            this.djh=data.data.checkedDept.djh;
            this.showDeptdata=data.data.checkedDept.returncode

            if (this.querydata == '') {
              this.showtable = false
              this.showbutton = true
              this.showModuleAuto()

            } else {
              this.showbutton = false
              this.showtable = true
            }


          }).catch(e => {
          // 打印一下错误
          console.log(e)
        })
      },

      QuerySecondPage(kpbh) {
        AjaxPlugin.$http.post(this.secondpageurl + '/wd-wmt/Inventory/QuerySecondPage?gh='+this.sgh+'&kpbh=' + kpbh)
          .then((data) => {
            console.log(data.data)

            this.sgh = data.data.gh;
            this.ssize = data.data.size;
            this.currentbmmc=data.data.currentbmmc
            if( data.data.cardResult.detail!=null){
              this.querydata = data.data.cardResult.detail
            }else {
              this.querydata="";
            }

            if(data.data.checkedDept.inventoryDept!=null){
              this.bmmc=data.data.checkedDept.inventoryDept.bmmc
            }
            this.djh=data.data.checkedDept.djh;
            this.showDeptdata=data.data.checkedDept.returncode
            this.showzk=data.data.cardResult.returncode

            if (this.querydata == '') {
              this.showtable = false
              this.showbutton = true
              this.showModuleAuto()

            } else {
              this.showbutton = false
              this.showtable = true
            }


          }).catch(e => {
          // 打印一下错误
          console.log(e)
        })
      },

      ConfirmedData(kpbh) {
        AjaxPlugin.$http.post(this.secondpageurl + '/wd-wmt/Inventory/QueryConfirmed?kpbh=' + kpbh)
          .then((data) => {
            this.ConfirmedSize = data.data.ConfirmedSize


          }).catch(e => {
          // 打印一下错误
          console.log(e)
        })
      },


      confirmdialog() {

        if (this.$verify.check()) {
          this.show = false
          var yqname
          var lqname
          for (var a = 0; a < this.yqlist.length; a++) {
            if (this.yqlist[a].key == this.yqdata) {
              yqname = this.yqlist[a].value
            }
          }
          for (var b = 0; b < this.lqlist.length; b++) {
            if (this.lqlist[b].key == this.lqdata) {
              lqname = this.lqlist[b].value
            }
          }
          this.azYq = yqname
          this.azWzdz = lqname

          var azddata = yqname + '' + lqname + '' + this.detailwz
          this.byazdd = azddata
          this.$set(this.querydata, 'azAzdd', azddata)
            this. updateAzdd()

        } else {


        }


      },


      updateAzdd(){
        var ConfirmCard = {}
        ConfirmCard["serialNo"]= this.querydata.serialNo
        ConfirmCard["azYq"] = this.azYq
        ConfirmCard["azWzdz"] = this.azWzdz
        ConfirmCard["azDddress"] = this.detailwz
        ConfirmCard["azAzdd"] = this.azYq + this.azWzdz + this.detailwz
        ConfirmCard["oldazAzdd"]=this.querydata.azAzdd
        ConfirmCard["oldazYq"] = ''
        ConfirmCard["oldazWzdz"] = ''
        ConfirmCard["oldazDddress"] =''
     var cardarray=new Array();
        cardarray.push(ConfirmCard)
        var CardConfirms = JSON.stringify(cardarray)
        this.$http.post(this.secondpageurl + '/wd-wmt/Inventory/updateAzdd', CardConfirms)
          .then((data) => {
          }).catch(e => {
          // 打印一下错误
          console.log(e)
        })


      },



      Revocationazd() {
        this.showazd = true
      },
      onConfirm() {

        this.showazd = false
        this.byazdd = ''
        this.azYq = ''
        this.azWzdz = ''
        this.detailwz = ''

        this.$set(this.querydata, 'azdd', '')
      },
      onConfirmKp(){
        this.byazdd = ''
        this.azYq = ''
        this.azWzdz = ''
        this.detailwz = ''
        this.scanLoad();

      },
      ExecuteScan(kpbh){
        this.byazdd = ''
        this.AlternateKpbh = kpbh
        this.QuerySecondPage(kpbh)
      },

      ScanCode(){
        this.byazdd = ''
        this.azYq = ''
        this.azWzdz = ''
        this.detailwz = ''
     /*   if (this.querydata != ''){
          this.showkp = true
        }else {
          this.scanLoad();
        }*/
        this.scanLoad();
      },
      showModuleAuto() {
        AlertModule.show({
          title: '',
          content: '当前条码无法识别',
          onShow() {

          },
          onHide() {

          }
        })
        setTimeout(() => {
          AlertModule.hide()
        }, 5000)
      },
      AlertConfirmedMessage() {
        AlertModule.show({
          title: '',
          content: '当前的卡片信息已在任务列表中,请勿重复操作',
          onShow() {

          },
          onHide() {

          }
        })
        setTimeout(() => {
          AlertModule.hide()
        }, 5000)
      }

    },
    mounted() {
      this.sgh = this.$route.query.gh
      this.ssize = this.$route.query.size

      if(this.$route.query.kpbh=='0'){
        AjaxPlugin.$http.post(this.secondpageurl + '/wd-wmt/Inventory/QueryCardConfirm?gh=' + this.sgh)
          .then((data) => {
            this.sgh = data.data.gh;
            this.ssize  = data.data.size;
            this.querydata=''
            this.showtable = false
            this.showbutton = true
          }).catch(e => {
          // 打印一下错误
          console.log(e)
        })

      }else{
        this.AlternateKpbh = this.$route.query.kpbh
        this.QuerySecondPage(this.$route.query.kpbh)
      }
    },

    verify: {

      detailwz: "required",
      yqdata: "required",
      lqdata: "required"

    },
    computed: {
      verifyError: function () {
        return this.$verify.$errors;
      }
    }

  }


</script>

<style lang="less" scoped>
  @import '~vux/src/styles/close';
  @import '~vux/src/styles/1px.less';
  #second{
    height:100%;
  }
  .flex-demo {
    text-align: center;
    color: #fff;
    background-color: #20b907;
    border-radius: 4px;
    background-clip: padding-box;
  }

  .chart1 {
    /* flex: 1; */
    width: 90% !important;
    margin: 0px auto !important;
    margin-bottom: 100px !important;
    background-color: #fff !important;
    border-radius: 10px !important;
  }

  .td-left {
    text-align: left;
    color: #c7ccd6;
    padding-left: 10px
  }

  .td-right {
    text-align: right;
    color: #343f51;
    padding-right: 10px
  }

  .dialog-title {
    line-height: 30px;
    color: #666;
  }

  .icon-btn {
    display: inline-block !important;
    width: 100% !important;
    height: 35px !important;
    line-height: 35px!important;
    text-align: center !important;
    padding: 0;
    /*padding-left: 16px!important;*/
    color: #4786ff !important;
    background-color: #f7f7f7 !important;
    border-radius: 50px !important;
  }

  .icon-btn:after {
    /*margin-left: 10px !important;*/
    border-width: 0 !important;
    border-radius: 50px !important;
  }

  .icon-site {
    display: inline-block;
    width: 24px !important;
    height: 24px !important;
    vertical-align: text-bottom!important;
    background: url("./assets/site.png") no-repeat;
    background-position: center;
    background-size: contain;
  }
  .ic_elect{
    display: inline-block;
    width: 24px !important;
    height: 24px !important;
    vertical-align: text-bottom!important;
    background: url("./assets/ic_elect@2x.png") no-repeat;
    background-position: center;
    background-size: contain;
  }
  .ic_chehui{
    display: inline-block;
    width: 24px !important;
    height: 24px !important;
    vertical-align: text-bottom!important;
    background: url("./assets/ic_chehui@2x.png") no-repeat;
    background-position: center;
    background-size: contain;
  }
  .text{
    font-size: 16px!important;
  }
  .img-box {
    height: 350px;
    width: 300px;
    overflow: hidden;
  }

  .btn5 {
    color: #fff !important;
    background-color: #4786ff !important;
    border-radius: 50px !important;
  }

  .btn5:after {
    margin-left: 10px !important;
    border-width: 0 !important;
    border-radius: 50px !important;
  }

  .required {
    position: absolute;
    left: -15px;
    top: 50%;
    font-size: 13px;
    color: red;
    transform: translate(0, -50%);
  }

  .tip {
    position: absolute;
    right: -15px;
    top: 50%;
    font-size: 13px;
    color: red;
    transform: translate(0, -50%);
    z-index: 5;
  }

  .dialog-header {
    width: 100%;
    height: 35px;
    background: url("./assets/ic_person@2x.png") no-repeat;
    background-position: right;
    background-size: contain;
    background-color: #4786ff;
  }

  .weui-cells {
    margin-top: 0 !important;
    overflow: inherit!important;
  }

  .dialog-title {
    line-height: 30px;
    color: #666;
  }

  .img-box {
    height: 350px;
    width: 300px;
    overflow: hidden;
  }


  .sm-btn {
    background-color: #4786ff !important;
  }

  .weui-cell {
    border-width: 0 !important;
    background-color: #fafafa !important;
  }

  .weui-cells:before {
    border-width: 0 !important;
    background-color: #fafafa !important;
  }

  .weui-cells:after {
    border-width: 0 !important;
    background-color: #fafafa !important;
  }


  .weui-cells {
    margin-top: 0 !important;
  }

  .close{
    position:absolute;
    left: 0%;
    right: 0%;
    bottom: -50px;
    z-index: 10;
    text-align: center;
    font-size: 32px;
  }
  .close .weui-icon-clear{
    font-size: 32px;
    color:#fff ;
    opacity: 0.6;
  }
  .vux-close {
    margin-left: 90%;
    margin-top: 8px;
    margin-bottom: 8px;
    color: red;
  }


</style>
